<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <QuestionsHeader />
      <!-- 表单 -->
      <QuestionsForm @onSubmit="onSubmit" />
      <!-- 切换兰 -->
      <el-tabs v-model="chkState" type="card" @tab-click="getList">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 条数 -->
      <QuestionsPagetool :counts="page.counts" />
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column prop="number" label="试题编号" width="220">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column
          :formatter="questionType"
          prop="questionType"
          label="题型"
          width="80"
        >
        </el-table-column>
        <el-table-column
          :formatter="question"
          prop="question"
          label="题干"
          width="150"
        >
        </el-table-column>
        <el-table-column
          :formatter="addDate"
          prop="addDate"
          label="录入时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          :formatter="difficulty"
          prop="difficulty"
          label="难度"
          width="70"
        >
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="140">
        </el-table-column>
        <el-table-column
          :formatter="chkType"
          prop="chkState"
          label="审核状态"
          width="140"
        >
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="140">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="140">
        </el-table-column>
        <el-table-column
          :formatter="publishType"
          prop="publishState"
          label="发布状态"
          width="140"
        >
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template v-slot="{ row }">
            <div class="btn">
              <el-button type="text" @click="lookChoice(row.id)">预览</el-button>
              <el-button type="text" @click="checkState(row)" :disabled="row.chkState !== 0">审核</el-button>
              <el-button type="text" :disabled="row.publishState !== 0">修改</el-button>
              <el-button type="text" @click="isPublis(row)">{{ ispublishState(row) }}</el-button>
              <el-button type="text" @click="removeChoice(row.id)" :disabled="row.publishState !== 0">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination
        :page="page"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-card>
    <QuestionsPreview ref="QuestionsPreview" :questionVisible.sync="questionVisible"/>
    <QuestionsCheck ref="QuestionsCheck" :checkVisible.sync="checkVisible" @updataCheck="getList"/>
  </div>
</template>

<script>
import { choice, remove, choicePublish } from '@/api/hmmm/questions.js'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '@/api/hmmm/constants.js'
import { parseTime } from '@/utils'
import QuestionsForm from '../components/questions-form.vue'
import QuestionsPagetool from '../components/questions-pagetool.vue'
import QuestionsHeader from '../components/questions-header.vue'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
export default {
  components: { QuestionsPagetool, QuestionsForm, QuestionsHeader, QuestionsPreview, QuestionsCheck },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 5,
        counts: 0
      },
      chkState: 'all',
      tableData: [],
      questionVisible: false,
      checkVisible: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 渲染列表
    async getList () {
      if (this.chkState !== 'all') {
        const { data } = await choice({ ...this.page, chkState: this.chkState })
        this.tableData = data.items
        this.page.counts = data.counts
      } else {
        const { data } = await choice(this.page)
        this.tableData = data.items
        this.page.counts = data.counts
      }
    },
    // 格式化题型
    questionType (row, column, cellValue, index) {
      return questionType.find(item => item.value === cellValue)?.label
    },
    // 格式化难度
    difficulty (row, column, cellValue, index) {
      return difficulty.find(item => item.value === cellValue)?.label
    },
    // 审核状态
    chkType (row, column, cellValue, index) {
      return chkType.find(item => item.value === cellValue)?.label
    },
    // 发布状态
    publishType (row, column, cellValue, index) {
      if (row.chkState === 0) return '待发布'
      return publishType.find(item => item.value === row.publishState)?.label
    },
    // 格式化时间
    addDate (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    // 格式化题干
    question (row, column, cellValue, index) {
      return cellValue.replace(/<[^>]+>/g, '')
    },
    // 条数发生变化
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    // 页数发生变化
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 查询
    async onSubmit (val) {
      const { data } = await choice(val)
      this.tableData = data.items
      this.page.counts = data.counts
    },
    // tab栏切换
    handleClick (list) {
      console.log(list)
      console.log(this.activeName)
    },
    // 预览
    lookChoice (id) {
      this.questionVisible = true
      this.$refs.QuestionsPreview.id = id
    },
    // 删除
    async removeChoice (id) {
      try {
        await this.$confirm('确定删除吗？', '提示')
        await remove({ id })
        this.$message({ type: 'success', message: '删除成功' })
        this.getList()
      } catch (e) {
        console.log(e)
      }
    },
    // 审核
    checkState (row) {
      console.log(row)
      this.checkVisible = true
      this.$refs.QuestionsCheck.rowList = row
    },
    // 判断上架按钮
    ispublishState (row) {
      if (row.publishState === 1) return '下架'
      return '上架'
    },
    // 上下架
    async isPublis (row) {
      try {
        if (row.publishState === 0) {
          await this.$confirm('您确认上架这道题目吗?', '提示')
          await choicePublish({ id: row.id, publishState: 1 })
          this.$message({ type: 'success', message: '上架成功' })
        } else {
          await this.$confirm('您确认下架这道题目吗?', '提示')
          await choicePublish({ id: row.id, publishState: 0 })
          this.$message({ type: 'success', message: '下架成功' })
        }
        this.getList()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .container {
    margin: 10px 0;
    padding: 0 10px;
    .el-table {
      margin-bottom: 20px;
      .btn {
        display: flex;
      }
    }
  }
</style>
